<template>
  <div class="content">
   
   
     <!-- 面包屑 -->
     <div class="mianbao">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/pagesContent' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>保险详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>套餐内容</span>
      </div>
      <div class="row1">
        <div class="zuo">
          电梯责任保险
        </div>
        <div class="you">
          <div class="qian" v-if="type==1">
            110元/部
          </div>
          <div class="qian" v-if="type==2">
            350元/部
          </div>
          <div class="qian" v-if="type==3">
            450元/部
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>保险方案</span>
      </div>
      <div class="row1">
        <div class="zuo">
          适用电梯
        </div>
        <div class="you">
          <div class="value" >
            所有电梯
          </div>
        </div>
      </div>
      <div class="row1">
        <div class="zuo">
          销售范围
        </div>
        <div class="you">
          <div class="value" >
            中国大陆(除港澳台地区)
          </div>
        </div>
      </div>
      <div class="row1">
        <div class="zuo">
          保险期限
        </div>
        <div class="you">
          <div class="value" >
            1年
          </div>
        </div>
      </div>
      <div class="row1">
        <div class="zuo">
          	保单形式
        </div>
        <div class="you">
          <div class="value" >
            电梯保单
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>保障事项</span>
        <el-button @click="isShow=!isShow" style="float: right; padding: 3px 0" type="text">{{isShow?'收起':'查看详情'}}</el-button>
      </div>
      <div class="row1" >
        <div class="zuo">
          累计责任限额
        </div>
        <div class="you">
          <div class="value" v-if="type==1">
            300万
          </div>
          <div class="value" v-if="type==2">
            400万
          </div>
          <div class="value" v-if="type==3">
            600万
          </div>
        </div>
      </div>
      <transition name="details-fade">
        <div class="neirong" v-show="isShow">
          在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的人身伤亡或财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的累计责任限额进行赔偿。
        </div>
      </transition>
      <div class="row1">
        <div class="zuo">
          每次事故责任限额
        </div>
        <div class="you">
          <div class="value" v-if="type==1">
            150万
          </div>
          <div class="value" v-if="type==2">
            200万
          </div>
          <div class="value" v-if="type==3">
            300万
          </div>
        </div>
      </div>
      <transition name="details-fade">
        <div class="neirong"  v-show="isShow">
          在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的人身伤亡或财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每次事故责任限额进行赔偿。
        </div>
      </transition>
      
      <div class="row1">
        <div class="zuo">
          每人赔偿限额
        </div>
        <div class="you">
          <div class="value" v-if="type==1">
            40万
          </div>
          <div class="value" v-if="type==2">
            40万
          </div>
          <div class="value" v-if="type==3">
            40万
          </div>
        </div>
      </div>
      <transition name="details-fade">
        <div class="neirong"  v-show="isShow">
          在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的人身伤亡或财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每人赔偿限额进行赔偿。
        </div>
      </transition>
      
      <div class="row1">
        <div class="zuo">
          每次事故每人医疗责任限额
        </div>
        <div class="you">
          <div class="value" v-if="type==1">
            5万
          </div>
          <div class="value" v-if="type==2">
            6万
          </div>
          <div class="value" v-if="type==3">
            8万
          </div>
        </div>
      </div>
      <transition name="details-fade">
        <div class="neirong"  v-show="isShow">
          在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的医疗费用支出，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每次事故每人医疗责任限额进行赔偿。
        </div>
      </transition>
      
      <div class="row1">
        <div class="zuo">
          每次事故每人财产责任限额
        </div>
        <div class="you">
          <div class="value" v-if="type==1">
            2万
          </div>
          <div class="value" v-if="type==2">
            2万
          </div>
          <div class="value" v-if="type==3">
            3万
          </div>
        </div>
      </div>
      <transition name="details-fade">
        <div class="neirong"  v-show="isShow">
          在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每次事故每人财产责任限额进行赔偿。
        </div>
      </transition>
      
      <div class="row1">
        <div class="zuo">
          	免赔
        </div>
        <div class="you">
          <div class="value" >
            每次事故绝对免赔额为500元或损失金额的5%，二者以高者为准
          </div>
        </div>
      </div>
    </el-card>
     <el-button type="primary" class="btn" @click="gonext">立即投保</el-button>
  </div>
</template>

<script>
import { gettoken } from '@/utils/auth'

export default {
  name: "goodDetail",//个人中心 
  data() {
    return {
      loading: false, // 加载状态
      type:0,
      isShow:false,
    };
  },
  
  mounted() {
    var type=this.$route.query.type
    this.type=type
    
  },
  
  methods: {
    gonext(){
       var token=gettoken()
       console.log(token)
        if(!token){
          this.$message.error("请先登录")
          return
        }
      this.$router.push({path:"/insureAdd", query:{type: this.type} })
    },
  },
  
};
</script>
<style scoped lang="scss">
.content{
  padding-bottom: 45px;
  background: #fff;
  .mianbao{
    max-width: 1200px;
    margin:0  auto 16px;
    padding-top: 20px;
  }
  .box-card{
    max-width: 1200px;
    margin: 25px auto 30px;
    transition: height 1s ease-in-out;

    .row1{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .zuo{
        font-size: 16px;
        color: #333333;
      }
      .you{
        font-size: 16px;
        color: #999999;
        .qian{
          color: #165DFF;
          font-weight: bold;
        }
      }
    }
    /* 过渡动画样式 */
    .details-fade-enter-active,
    .details-fade-leave-active {
      transition: all 0.5s ease;
      max-height: 90px; /* 足够大的值容纳内容 */
      opacity: 1;
      overflow: hidden;
    }

    /* 进入开始和离开结束状态 */
    .details-fade-enter,
    .details-fade-leave-to {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding: 0; /* 确保padding也参与过渡 */
    }
    .neirong{
      width: 100%;
      height: fit-content;
      padding: 16px;
      box-sizing: border-box;
      background: rgba(22, 93, 255, .1);
      border-radius: 8px;
      font-weight: 400;
      font-size: 14px;
      color: #165DFF;
      line-height: 27px;
      text-indent: 2rem;
      margin-bottom: 20px;
    }
  }
  .btn{
    width: 1200px;
    height: 80px;
    margin: 30px auto;
    display: block;
    font-size: 40px;
  }

}
</style>
